<template>
  <el-form
    ref="formRef"
    :disabled="!canEdit"
    :inline="false"
    :model="form"
    :rules="rules"
    size="small"
    label-position="top"
  >
    <el-form-item prop="pass" label-position="right">
      <el-radio-group v-model="form.pass">
        <el-radio
          v-for="item in passOptions"
          :key="item.value"
          :label="item.value"
          class="pass-radio"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>

    <el-form-item label="说明" prop="reply">
      <el-input
        v-model="form.content"
        type="textarea"
        :autosize="{ minRows: 8 }"
        :disabled="!show"
      />
    </el-form-item>
    <el-form-item label="开始日期 - 截止日期">
      <el-date-picker
        v-model="state.dateRange"
        :disabled="!show"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="截止日期"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="优先级" prop="priority">
      <el-select
        v-model="form.priority"
        style="width: 100%"
        class="priority-select"
        :disabled="!show"
      >
        <template #prefix>
          <span
            class="priority-circle"
            :style="{ background: PRIORITY_CODES[form.priority]?.color }"
          ></span>
        </template>
        <el-option
          v-for="item in priorityOptions"
          :key="item.code"
          :label="item.value"
          :value="item.code"
        >
          <span
            class="priority-circle"
            :style="{ background: PRIORITY_CODES[item.code]?.color }"
          ></span>
          <span>{{ item.value }}</span>
        </el-option>
      </el-select>
    </el-form-item>

    <div v-if="canEdit" style="text-align: right">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, nextTick, PropType, reactive, ref, toRefs, watch } from 'vue'

import { ElMessage } from 'element-plus'

import IssuesApi from '@/api/issues'

import CommonState from './commonState'
import { ISSUES_STATUS_MAP, PRIORITY_CODES } from '@/configs/codeMaps'
import IBaseObj from '#/index'

const { passOptions, priorityOptions } = CommonState
const rules = {
  pass: [{ required: true, message: '请选择影像质量评估', trigger: 'change' }],
}

const props = defineProps({
  info: {
    type: Object as PropType<IBaseObj>,
    default: () => {},
  },
  detail: {
    type: Object as PropType<IBaseObj>,
    default: () => {},
  },
  isQc: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['search'])

const state: IBaseObj = reactive({
  dateRange: [],
  show: false,
  form: {
    pass: '',
    priority: '',
    beginTime: '',
    endTime: '',
    content: '',
  },
  canEdit: false,
})

const { form, canEdit, show } = toRefs(state)

const formRef = ref()

const reset = () => {
  formRef.value.resetFields()
  state.form = {
    pass: '',
    priority: '',
    beginTime: '',
    endTime: '',
    content: '',
  }
}

const submit = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const ret = await IssuesApi.addNewIssues({
        ...state.form,
        pid: props.info.pid,
        vid: props.info.vid,
        sic: props.info.subject.sic,
        centreId: props.info.centreId,
        subId: props.info.subId,
        isuId: props.detail?.isuId,
      })
      if (ret) {
        ElMessage({ message: '提交成功！', type: 'success' })
        emits('search')
      }
    }
  })
}

watch(
  () => state.dateRange,
  (val) => {
    if (val) {
      const [startDate, endDate] = val
      form.value.beginTime = startDate
      form.value.endTime = endDate
    } else {
      form.value.beginTime = ''
      form.value.endTime = ''
    }
  }
)

watch(
  () => state.form.pass,
  (val) => {
    state.show = !val // 不符合才显示
  }
)

watch(
  () => props.info,
  (val) => {
    console.log('ss', props.info)
    // 只有qc 在待核查 质疑 已回复状态下可以编辑
    state.form = {
      pass: '',
      priority: '',
      beginTime: '',
      endTime: '',
      content: '',
    }
    const status =
      val.issuesStatus === ISSUES_STATUS_MAP.daihecha ||
      val.issuesStatus === ISSUES_STATUS_MAP.zhiyi ||
      val.issuesStatus === ISSUES_STATUS_MAP.yihuifu
    state.canEdit = props.isQc && status

    if (props.detail) {
      Object.keys(state.form).forEach((key) => {
        state.form[key] = props.detail[key]
      })
      if (state.form.beginTime) {
        state.dateRange = [state.form.beginTime, state.form.endTime]
      }
    } else {
      nextTick(() => {
        reset()
        state.form.priority = priorityOptions.value[0]?.code || ''
        console.log('s', state.form.priority, priorityOptions)
      })
    }
  },
  {
    immediate: true,
  }
)
</script>

<style lang="scss" scoped>
.el-form {
  margin: 0 auto;

  .pass-radio {
    font-weight: 600;
  }

  :deep() {
    .el-form-item {
      &__label {
        padding-bottom: 0;
        font-weight: normal;
      }
    }

    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .priority-select {
      .el-input__prefix {
        left: 10px;
      }
    }
  }
}

.priority-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
